<template>
  <van-goods-action-mini-btn
    icon="v-icon-kf3"
    text="客服"
    v-if="showService"
    class="btn-kf"
    id="WS-SHOW-CHAT"
    @click="openKefu"
  />
  <van-goods-action-mini-btn icon="cart-o" text="购物车" v-else to="/mall/cart" />
</template>

<script>
import { GoodsActionMiniBtn } from "vant";
import { qlkefu } from "@/mixins";
export default {
  data() {
    return {
      showService: false
    };
  },
  props: {
    detail: Object
  },
  mixins: [qlkefu],
  mounted() {
    const $this = this;
    $this
      .getKefu($this.detail.shop_id, $this.detail.goods_id)
      .then(data => {
        if ($this.$store.getters.token) {
          $this.loadKefu(data.domain).then(() => {
            $this.showService = true;
            $this.$nextTick(() => {
              $this.serverFlag = true;
              const {
                uid,
                username,
                member_img,
                reg_time
              } = $this.$store.state.member.info;
              qlkefuChat.init({
                uid,
                uName: username,
                avatar: member_img,
                regTime: reg_time || "",
                goods: {
                  goods_id: $this.detail.goods_id,
                  goods_name: $this.detail.goods_name,
                  price: $this.detail.min_price,
                  pic_cover: $this.detail.goods_image_yun
                }
              });
            });
          });
        } else {
          $this.showService = true;
        }
      })
      .catch(() => {});
  },
  components: {
    [GoodsActionMiniBtn.name]: GoodsActionMiniBtn
  }
};
</script>

<style scoped>
.btn-kf >>> .van-icon-v-icon-kf3:before {
  margin: 0 -5px;
}
</style>